<!-- <myUsername direction="right">
    <template v-slot:header>
      123
    </template>
    <template v-slot:footer>
      456
    </template>
  </myUsername> -->
<template>
    <div class="language-currency-selector" @mouseenter="showPopup = true; arrowsChange = true"
        @mouseleave="showPopup = false; arrowsChange = false">
        <!-- 当前语言/当前币种显示 -->
        <div class="trigger" :class="triggerHover" @mouseenter="triggerHover = 'triggerHover'"
            @mouseleave="triggerHover = 'trigger'">
            <slot name="header"></slot>
        </div>
        <div class="popup" :style="styleObj" v-show="showPopup" @mouseenter="triggerHover = 'triggerHover'"
            @mouseleave="triggerHover = 'trigger'">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
import myArrows from "@/components/myHome/myArrows"
export default {
    name: 'myUsername',
    components: {
        myArrows
    },
    props: {
        direction: String,
        styleObj: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            // 语言 / 币种切换
            showPopup: false,
            triggerHover: 'trigger', // English/ USD 样式
            // 箭头旋转
            arrowsChange: false,
        };
    }
}
</script>

<style lang="scss" scoped>
.language-currency-selector {
    position: relative;
    display: inline-block;
    margin-left: 100px;

    .trigger {
        cursor: pointer;
        font-size: 14px;
        align-items: center;
        color: #333;

        display: flex;
        height: 50px;
        justify-content: center;
        padding: 0 20px;
        position: relative;
        white-space: nowrap;
        z-index: 2;
    }

    .triggerHover {
        cursor: pointer;
        font-size: 14px;
        align-items: center;
        color: #00B2B9;
        background-color: white;
        display: flex;
        height: 50px;
        justify-content: center;
        padding: 0 20px;
        position: relative;
        white-space: nowrap;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    }

    .popup {
        position: absolute;
        // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        top: 50px;
        right: 0;
        background: white;
        background-color: red;
        z-index: 10;
        font-family: sans-serif;
    }
}
</style>